<template>
	<div class="alertBox">
		<div class="alertBk"></div>
		<div class="wordBox">
			<div class="alertHead">
				<p class="tittle" v-text="title"></p>
				<div class="myClose" @click="closeAlarm">
					<img src="~_assets/close.png" class="myClose"/>
				</div>
			</div>
			<div class="alertBody">
				<div class="alertBut">
					<p v-text="titles" class="txtTitle" v-show="!showQR"></p>
					<p v-html="content" class="txtContent" v-show="!showQR"></p>
					<div class="qrBox" v-show="showQR">
						<canvas id="canvas" class="ewm"></canvas>
						<p class="theme" v-text="theme"></p>
					</div>
					<div class="txtBtns" v-if="type != 4">
						<button class="isFalse" @click="closeAlarm(0)">取消</button>
						<button class="isTrue" @click="closeAlarm(1)">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import QRCode from 'qrcode'
	import {
		SAVE_OR_EDIT_SETTING,
	}from '@/config/url'

	let title = [
		'下架提示',
		'作废提示',
		'返回首页',
		'删除',
		'活动二维码',
	]
	let titles = [
		'是否将当前活动下架',
		'是否将当前活动作废',
		'输入内容将被清空，确认返回上一级？',
		'确认删除当前阶梯与奖励？',
		'',
		]
	let content = [
		'1.活动"下架"后将无法重新上架.<br>2.用户活动列表将显示"活动结束"',
		'活动"作废"后用户活动列表将不再显示该活动',
		'',
		'',
		'',
		]

	export default {
		props:['type','qrUrl','theme','selectItem'],
		data(){
			return{
				showQR:false,
				currentItem:this.selectItem,
				operator:null
			}
		},
		mounted(){
			if(this.type == 4){
				this.createQR(this.selectItem.avtivityModel)
				this.theme = this.selectItem.activityTheme
			}
		},
		computed:{
			title(){
				return title[this.type];
			},
			titles(){
				return titles[this.type];
			},
			content(){
				return content[this.type];
			},
		},
		methods: {
			changeActivityStatus(){
				let status = ''
				if(this.type == '0'){//下架
					status = '990013'
				}else if(this.type == '1'){//作废
					status = '990020'
				}
				this.$post(SAVE_OR_EDIT_SETTING,{
					activityCode:sessionStorage.getItem('activityCode'),
					activityStatus:status,
					operator:this.operator,
				})
					.then(res=>{
						let data = res.data
						if(res.status == 1){
							this.$message({
								message: '提交成功',
								type: 'success'
							});
							this.$emit('closeAlarm',1)
						}else{
							this.$message({
								message: res.data,
								type: 'warning'
							});
						}
					})
					.catch(err=>{
						console.log(err)
						this.$message({
							message: '操作失败',
							type: 'warning'
						});
					})
			},
			createQR(url){
				let canvas = document.getElementById('canvas');
				let width = document.clientWidth;
				let w = (234/1920)*width;
				QRCode.toCanvas(canvas, this.EWM + url, 
					{
						errorCorrectionLevel: 'L',
						// version: 20,
						margin:2,
						scale:8,
						width:w,
						color:{
							// dark:'#f00',
							// light:'#ff0'
						}
					},
				function (error) {
					if (error) console.error(error)
				})
				this.showQR = true
			},
			closeAlarm(type){
				if(type == 1){
					if(this.type == 2){
						this.$emit('closeAlarm',1)
					}else{
						this.changeActivityStatus()
					}
				}else{
					this.$emit('closeAlarm')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '~_config/mixin.less';
	.alertBut{
		.fx(column);
		.txtTitle{
			.sc(20px,#000);
			font-weight: 400;
		}
		.txtContent{
			.sc(16px,#F74358);
			line-height: .16rem;
			margin-top: 39px;
			margin-bottom: 64px;
		}
		.txtBtns{
		}
		.qrBox{
			margin-bottom: 14px;
		}
		.theme{
			text-align: center;
		}
	}
</style>
